<template>
	<scroll-view class="content">
		<homebar :alpha="alpha" />
		<view class="text-area">
			<!-- 轮播图区域 -->
			<view class="page-section-spacing">
				<swiper class="swiper" :indicator-dots="indicatorDots" indicator-active-color="#f0f0f0"
					:autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="item in imagesList" :key="item.url">
						<view class="swiper-item uni-bg-red">
							<image style="width: 100%;"
								:src="item.url"
								mode=""></image>
						</view>
					</swiper-item>
					<!-- <swiper-item>
						<image style="width: 100%;"
							src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a32224c2-a344-4b92-a410-425da7a40847/deb1ac1e-8b64-4124-aa19-21cab3c02187.png"
							mode=""></image>
					</swiper-item> -->
				</swiper>
			</view>
			<view :style="{height:230-navBarHeight-statusBarHeight+'px'}"></view>
			<!-- 分类区域 -->
			<view class="classify">
				<view class="classify_content">
					<view class="classify_item" @click="GoTo('前端')">
						<image src="../../static/icon/HTML.png" mode=""></image>
						<text>前端</text>
					</view>
					<view class="classify_item" @click="GoTo('数据库')">
						<image src="../../static/icon/CSS.png" mode=""></image>
						<text>数据库</text>
					</view>
					<view class="classify_item" @click="GoTo('UI')">
						<image src="../../static/icon/12.png" mode=""></image>
						<text>UI</text>
					</view>
					<view class="classify_item" @click="GoTo('服务器')">
						<image src="../../static/icon/19.png" mode=""></image>
						<text>服务器</text>
					</view>
					<view class="classify_item" @click="GoTo('后端')">
						<image src="../../static/icon/text.png" mode=""></image>
						<text>后端</text>
					</view>
				</view>
				<view style="height:70px;"></view>
			</view>
			<!-- news -->
			<view class="newsify">
				<view class="news-content">

					<view class="news_left">
						<view class="news_item">
							<view class="listine"></view>
							<text>你有29积分待领取</text>
							<text class="qianse">8小时之前</text>
						</view>
						<view class="news_item">
							<view class="listine"></view>
							<text>有人发布了新的动态哦</text>
							<text class="qianse">9小时之前</text>
						</view>
					</view>
					<view class="news_right" @click="GoTo('dong-tai')">
						<uni-icons type="arrowright" color='#ccc' size="30px"></uni-icons>
					</view>

				</view>
			</view>
			<view class="newsify">
				<view class="guangg-content">
					<guang-gao></guang-gao>

				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="newsify">
				<view class="ship cainixihuan" @click="goToVido(videoList)">
					<view class="title">
						{{videoList.title}}
					</view>
					<view class="ship-bot">
						<view class="ship-lef">
							<view class="icon">
								<image
									src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01t1gSaS1tNfWW77Frq_!!847355890.png"
									mode=""></image>
							</view>
							<image :src="videoList.poster" mode=""></image>
							<!-- <video id="myVideo" :src="videoList.url || ''" :poster="videoList.poster"  loop enable-danmu muted controls v-if="videoList.poster">
					</video> -->
						</view>
						<view class="ship-rig">
							<view class="fu-title inforTitle">
								<text>{{videoList.fu_title}}</text>

							</view>
							<view class="shijian">
								{{videoList.time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="newsify">
				<!-- #ifndef MP-WEIXIN -->
				<view class="guangg-content vido">
					<vido-list :list="vidoLists"></vido-list>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<view class="guangg-content list">
						<index-list :articleList="articleList"></index-list>
					
					</view>
					<!-- #endif -->
			</view>

		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	// import aaa from "@/components/mp-html/mp-html.vue"
	// import navbar from '@/components/navbar/navbar.vue' 
	// easyCom components/组件名/组件名.vue // 局部引用,在niapp中可以不用引入,直接可以使用,文件名和组件名需要一样
	export default {
		data() {
			return {
				vidoLists: [],
				videoList: [],
				videoList: {
					url: ''
				},
				articleList: [],
				title: 'Hello',
				statusBarHeight: 20,
				navBarHeight: 40,
				widowHeight: 375,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,
				alpha: 0,
				imagesList:[],

            shareData: {
                title: '懒七日常前后端整理',
                path: '',
                imageUrl: '',
                content: '',
                desc: ''
            }
			}
		},
		computed: {
			...mapState(['user_id'])
		},
		name: 'index',
		onPageScroll(res) {
			if (res.scrollTop >= 230) {
				this.alpha = 1
			}
			if (res.scrollTop < 230) {
				this.alpha = res.scrollTop / 230
				// console.log(this.alpha);

			}
			// console.log(res,'ssssss');get_userinfo
		},
		onLoad() {

		},
			//#ifdef MP-WEIXIN
		onShareAppMessage () {
			return {
				title: this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				content: this.shareData.content,
				desc: this.shareData.desc,
				success: res => {
					console.info(res)
				}
			}
		},onShareTimeline: function(res) {
			return {
				title: this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				content: this.shareData.content,
				desc: this.shareData.desc,
				success: res => {
					console.info(res)
				}
			}
		},
		//#endif
		created() {
			this.get_images(2, "主页轮播")
			// console.log(this.$api);
			// this.$api.get_label()
			// 同步获取手机信息 , statusBarHeight 为导航栏的高度
			const info = uni.getSystemInfoSync();
			// 给状态栏赋值当前手机的状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.widowHeight = info.windowWid
			// H5 app mp-alipay 不支持当前API需要写条件编译
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			//获取小程序中 的胶囊位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 自动获取小程序的navbar的高度 = (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度)
			let navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			this.navBarHeight = navBarHeight
			this.widowHeight = menuButtonInfo.left
			// console.log(navBarHeight);
			// #endif
			this.get_article_sample()
			this.get_video()
			this.get_video(10)
		},
		methods: {
						async get_article_sample(){
								let articleList = await this.$api.get_article_sample({user_id:this.user_id})
								if (articleList.length === 0) {
									return false
								}
								this.articleList = articleList
						},
			goToVido(item){
				uni.navigateTo({
					url:"/pages/views/vido-view/vido-view?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			async get_images(mysize1,type){
				let imagesList = await this.$api.get_images({
					mysize1: mysize1,
					type: type
				})
				if (!imagesList) return false;
					this.imagesList = imagesList
				console.log(imagesList);
			},
			// reload(){
			// 	this.get_article_sample()
			// },
			async get_video(mysize1 = 1) {
				let videoList = await this.$api.get_video({
					mysize1: mysize1
				})
				if (!videoList) return false;
				if (mysize1 == 1) {
					this.videoList = videoList[0]
				} else {
					this.vidoLists = videoList
				}
				console.log(videoList);
			},
			GoTo(yupe) {
				if (yupe == 'jiqiren') {
					uni.navigateTo({
						url: '../views/jiqiren/jiqiren'
					})
				} else if (yupe == 'dong-tai') {

					uni.navigateTo({
						url: '../views/dong-tai/dong-tai'
					})
				} else {

					uni.navigateTo({
						url: '../views/UI-page/UI-page?type=' + yupe
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.classify {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;

		.cainixihuan {
			border-radius: 10px;
			background: #dfdfdf;
			height: 80px;
			align-items: center;
			margin-top: 10px !important;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			width: 100%;
		}

		.classify_content {
			position: absolute;
			z-index: 2;
			top: -20px;
			display: flex;
			padding-top: 10px;
			padding-bottom: 10px;
			// flex-direction: column;
			flex-wrap: nowrap;
			justify-content: space-around;
			width: 95%;
			background-color: #FFFFFF;
			box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.1);
			border-radius: 5px;

			.classify_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 40px;
					height: 40px;
				}

				text {
					font-size: 11px !important;
					padding-top: 5px;
					color: #666;
				}
			}
		}
	}

	.cainixin {
		font-weight: bold;
		margin-top: 10px;
		font-size: 16px;
		color: #666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.newsify {
		.list {
			margin-top: 10px;
		}

		.guangg-content {
			margin-top: 10px;
			background: #fff;
			border-radius: 5px;
			width: 95%;
		}
	}

	.vido {
		background: transparent !important;
	}

	.newsify {
		display: flex;
		justify-content: center;

		.news-content {
			background-color: #fff;
			height: 60px;
			width: 95%;
			border-radius: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;

			.news_left {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.news_item {
					display: flex;
					align-items: center;

					.listine {
						width: 6px;
						height: 6px;
						border-radius: 3px;
						background-color: #444;
						margin-left: 5px;
					}

					text {
						margin-left: 10px;
						color: #666;
						font-size: 13px;
					}

					.qianse {
						margin-left: 15px;
						color: #aaa;
					}
				}

			}

			.news_right {
				align-self: center;
			}
		}
	}

	.content {
		background-color: #f0f0f0;
		/* display: flex;
		flex-direction: column; */
		/* align-items: center; */
		/* justify-content: center; */
	}

	.logo {
		/* height: 200rpx; */
		/* width: 200rpx; */
		/* margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx; */
	}

	.text-area {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.swiper {
			height: 100%;
		}

		.page-section-spacing {
			height: 230px;
			position: absolute;
			z-index: 1;
			width: 100%;
			top: 0;

			.swiper-item {
				border-radius: 20px;
			}
		}
	}

	.title {
		/* font-size: 36rpx; */
		/* color: #8f8f94; */
	}

	.ship {
		box-sizing: border-box;
		background: #fff;
		padding: 10px;
		width: 95%;
		height: 150px;
		display: flex;
		flex-direction: column;
		color: #333;

		.title {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 10px;
		}

		.ship-bot {
			box-sizing: border-box;
			width: 100%;
			flex: 1;
			display: flex;

			#myVideo {
				box-sizing: border-box;
				border-radius: 10px;
				overflow: hidden;

			}

			.ship-lef {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border-radius: 10px;
				overflow: hidden;
				background: #eee;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;
					overflow: hidden;
				}
			}

			.icon {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				position: absolute;
				z-index: 99;
				top: 50%;
				left: 50%;
				overflow: hidden;
				transform: translate(-50%, -50%);

				image {
					width: 100%;
					height: 100%;
				}
			}

			.ship-rig {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 5px;
			}

			.shijian {
				font-size: 14px;
				color: #999;
			}
		}
	}
</style>
